<template>
    <div class="vueAnimationPrc2">
      <div class="movearea" @touchstart="xCoordinate" @touchmove="xCoordinate"
       :style="{backgroundColor:`hsl(${x}, 80%, 50%)`}">
        <h3>Move your mouse across the screen...</h3>
        <p>x:{{x}}</p>
      </div>
    </div>
</template>
<script lang="ts">
import { Vue, Options, Watch, Provide } from 'vue-property-decorator';

@Options({ components: {

} })
export default class VueAnimationPrc2 extends Vue {
  public x =0;
  public xCoordinate(e: TouchEvent) {
    this.x = e.touches[0].clientX;
    // console.log(e);
  }
  public beforeCreate() {
  }
}
</script>

<style lang="postcss" scoped>
.vueAnimationPrc2{
  .movearea{
     transition: 0.2s background-color ease;
  }
}
</style>
